<template>
  <div class="home-view">
    <!-- Hero Banner 部分 -->
    <section class="hero-section">
      <div class="particle-animation" ref="particleContainer"></div>
      <div class="hero-content">
        <h1 class="hero-title">Secure Data Processing Without Decryption</h1>
        <h2 class="hero-subtitle">基于全同态加密的隐私计算平台</h2>
        <div class="hero-cta">
          <router-link to="/demo" class="btn btn-primary">Try Live Demo</router-link>
          <router-link to="/algorithms" class="btn btn-secondary">Learn Algorithms</router-link>
        </div>
      </div>
    </section>

    <!-- 核心功能卡片部分 -->
    <section class="features-section">
      <h2 class="section-title">核心功能</h2>
      <div class="grid">
        <!-- 加密工资比较卡片 -->
        <div class="feature-card card">
          <div class="feature-icon">
            <span class="emoji">💰</span>
            <span class="arrow">→</span>
            <span class="emoji">🔒</span>
            <span class="arrow">→</span>
            <span class="emoji">✅</span>
          </div>
          <h3>加密工资比较</h3>
          <p>比较加密后的工资数据，不泄露具体数值。保护员工隐私的同时，实现公平透明的薪资管理。</p>
          <router-link to="/bonus-compare" class="feature-link">体验演示 →</router-link>
        </div>

        <!-- 安全统计卡片 -->
        <div class="feature-card card">
          <div class="feature-icon">
            <span class="emoji">📊</span>
            <span class="arrow">→</span>
            <span class="emoji">🔒</span>
            <span class="arrow">→</span>
            <span class="emoji">∑</span>
          </div>
          <h3>安全统计</h3>
          <p>对加密数据进行聚合计算，包括求和、平均值和方差等统计指标，无需解密原始数据。</p>
          <router-link to="/demo" class="feature-link">体验演示 →</router-link>
        </div>

        <!-- 算法支持卡片 -->
        <div class="feature-card card">
          <div class="feature-icon">
            <span class="emoji">⚙️</span>
            <span class="arrow">→</span>
            <span class="algorithm-tags">
              <span class="algorithm-tag">BGV</span>
              <span class="algorithm-tag">CKKS</span>
              <span class="algorithm-tag">TFHE</span>
            </span>
          </div>
          <h3>算法支持</h3>
          <p>支持主流FHE方案，包括BGV、CKKS和TFHE等，适用于不同场景的隐私计算需求。</p>
          <router-link to="/algorithms" class="feature-link">了解更多 →</router-link>
        </div>
      </div>
    </section>

    <!-- 技术流程图部分 -->
    <section class="workflow-section">
      <h2 class="section-title">技术流程</h2>
      <div class="workflow-container">
        <div class="workflow-step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3>输入数据</h3>
            <p>用户提供需要保护的敏感数据</p>
            <div class="step-animation">
              <div class="data-block">1024</div>
              <div class="data-block">3500</div>
            </div>
          </div>
        </div>
        
        <div class="workflow-arrow">
          <svg width="40" height="20" viewBox="0 0 40 20">
            <path d="M0 10 H 30 L 20 0 M 30 10 L 20 20" stroke="var(--primary-color)" stroke-width="2" fill="none" />
          </svg>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3>加密</h3>
            <p>使用同态加密算法加密数据</p>
            <div class="step-animation">
              <div class="encrypted-data">0x8F3A...</div>
              <div class="encrypted-data">0x7B2C...</div>
            </div>
          </div>
        </div>
        
        <div class="workflow-arrow">
          <svg width="40" height="20" viewBox="0 0 40 20">
            <path d="M0 10 H 30 L 20 0 M 30 10 L 20 20" stroke="var(--primary-color)" stroke-width="2" fill="none" />
          </svg>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3>云端计算</h3>
            <p>在密文上直接进行计算操作</p>
            <div class="step-animation">
              <div class="computation">
                <div class="encrypted-data small">0x8F3A...</div>
                <span class="operation">></span>
                <div class="encrypted-data small">0x7B2C...</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="workflow-arrow">
          <svg width="40" height="20" viewBox="0 0 40 20">
            <path d="M0 10 H 30 L 20 0 M 30 10 L 20 20" stroke="var(--primary-color)" stroke-width="2" fill="none" />
          </svg>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">4</div>
          <div class="step-content">
            <h3>结果解密</h3>
            <p>只解密最终计算结果</p>
            <div class="step-animation">
              <div class="result">A > B</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 部分 -->
    <section class="cta-section">
      <div class="cta-content">
        <h2>开始体验全同态加密的强大功能</h2>
        <p>无需解密即可安全处理敏感数据，保护您的隐私安全</p>
        <router-link to="/demo" class="btn btn-primary">立即体验</router-link>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 粒子动画容器引用
const particleContainer = ref(null);

// 粒子动画类
class ParticleAnimation {
  constructor(container) {
    this.container = container;
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.particles = [];
    this.animationId = null;
    
    // 配置
    this.particleCount = 50;
    this.particleSize = 3;
    this.particleSpeed = 0.5;
    this.particleColor = '#2962FF';
    this.lineColor = 'rgba(41, 98, 255, 0.2)';
    this.lineDistance = 150;
    
    // 初始化
    this.init();
  }
  
  init() {
    // 设置画布尺寸
    this.resize();
    
    // 添加到容器
    this.container.appendChild(this.canvas);
    
    // 创建粒子
    this.createParticles();
    
    // 开始动画
    this.animate();
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.resize.bind(this));
  }
  
  resize() {
    this.canvas.width = this.container.offsetWidth;
    this.canvas.height = this.container.offsetHeight;
  }
  
  createParticles() {
    this.particles = [];
    
    for (let i = 0; i < this.particleCount; i++) {
      this.particles.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        vx: (Math.random() - 0.5) * this.particleSpeed,
        vy: (Math.random() - 0.5) * this.particleSpeed,
        size: this.particleSize,
      });
    }
  }
  
  animate() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 更新和绘制粒子
    this.updateParticles();
    
    // 绘制连接线
    this.drawLines();
    
    this.animationId = requestAnimationFrame(this.animate.bind(this));
  }
  
  updateParticles() {
    this.particles.forEach(particle => {
      // 更新位置
      particle.x += particle.vx;
      particle.y += particle.vy;
      
      // 边界检查
      if (particle.x < 0 || particle.x > this.canvas.width) {
        particle.vx = -particle.vx;
      }
      
      if (particle.y < 0 || particle.y > this.canvas.height) {
        particle.vy = -particle.vy;
      }
      
      // 绘制粒子
      this.ctx.beginPath();
      this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
      this.ctx.fillStyle = this.particleColor;
      this.ctx.fill();
    });
  }
  
  drawLines() {
    for (let i = 0; i < this.particles.length; i++) {
      for (let j = i + 1; j < this.particles.length; j++) {
        const dx = this.particles[i].x - this.particles[j].x;
        const dy = this.particles[i].y - this.particles[j].y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance < this.lineDistance) {
          this.ctx.beginPath();
          this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
          this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
          
          // 根据距离设置透明度
          const opacity = 1 - (distance / this.lineDistance);
          this.ctx.strokeStyle = this.lineColor.replace('0.2', opacity * 0.2);
          
          this.ctx.stroke();
        }
      }
    }
  }
  
  destroy() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }
    
    window.removeEventListener('resize', this.resize);
    
    if (this.canvas && this.canvas.parentNode) {
      this.canvas.parentNode.removeChild(this.canvas);
    }
  }
}

// 粒子动画实例
let particleAnimation = null;

onMounted(() => {
  if (particleContainer.value) {
    particleAnimation = new ParticleAnimation(particleContainer.value);
  }
});

onUnmounted(() => {
  if (particleAnimation) {
    particleAnimation.destroy();
  }
});
</script>

<style scoped>
.home-view {
  width: 100%;
}

/* Hero 部分样式 */
.hero-section {
  position: relative;
  height: 80vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 3rem;
}

.particle-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 800px;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: var(--text-secondary);
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 功能卡片部分样式 */
.features-section {
  padding: 3rem 0;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--primary-color);
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.feature-icon {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.emoji {
  display: inline-block;
  margin: 0 0.5rem;
}

.arrow {
  color: var(--primary-color);
  font-size: 1.5rem;
}

.algorithm-tags {
  display: flex;
  gap: 0.5rem;
}

.algorithm-tag {
  background-color: var(--primary-color);
  color: white;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
}

.feature-link {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 500;
  color: var(--primary-color);
}

.feature-link:hover {
  text-decoration: underline;
}

/* 技术流程图部分样式 */
.workflow-section {
  padding: 3rem 0;
  background-color: var(--footer-bg);
  margin: 3rem 0;
}

.workflow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}

.workflow-step {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 1rem;
}

.step-content {
  width: 100%;
}

.step-animation {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.data-block {
  background-color: var(--card-bg);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.encrypted-data {
  background-color: var(--card-bg);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.encrypted-data::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(41, 98, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

.encrypted-data.small {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

.computation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.operation {
  font-weight: bold;
  color: var(--primary-color);
}

.result {
  background-color: var(--success-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  animation: pulse 2s infinite;
}

.workflow-arrow {
  margin: 0 1rem;
  animation: bounce 2s infinite;
}

/* CTA 部分样式 */
.cta-section {
  padding: 4rem 0;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  border-radius: 8px;
  margin: 2rem 0;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cta-section h2 {
  margin-bottom: 1rem;
}

.cta-section p {
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-section .btn {
  background-color: white;
  color: var(--primary-color);
}

.cta-section .btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 动画 */
@keyframes shimmer {
  100% {
    left: 100%;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .workflow-container {
    flex-direction: column;
  }
  
  .workflow-arrow {
    transform: rotate(90deg);
    margin: 1rem 0;
  }
  
  .workflow-step {
    width: 100%;
  }
  
  .hero-cta {
    flex-direction: column;
  }
}
</style>